<template>
  <div
    class="upload_shadow"
    ref="uploadShadowRef"
    :class="isDrag ? 'isDrag' : ''"
  >
    <div class="main" ref="uploadMainRef">
      <div v-if="!templateUrl">
        <img src="../assets/img/upImg.png" alt="" />
        <p>{{ tips }}</p>
      </div>
      <input type="file" name="" id="" multiple @change="clickUpload" />
      <img :src="templateUrl" alt="" />

      <div class="btn">
        <el-button :disabled="!templateUrl" @click="HandleUploadImg"
          >上传</el-button
        >
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { ElMessage } from "element-plus";
import { defineComponent, onMounted, reactive, ref } from "vue";
import { test, uploadImg } from "../api/file";

export default defineComponent({
  setup() {
    let uploadMainRef = ref(null) as any;

    let uploadShadowRef = ref(null) as any;

    let templateUrl = ref(null);

    let uploadFile = ref(null) as any;

    let tips = ref("将.png和.jpg文件拖放到这里！");

    let isDrag = ref(false);

    // 点击选择图片
    const clickUpload = (e: any) => {
      fileLimit(e.target.files[0]);
    };

    // 图片经过上传容器时
    const fileDrdragoveragover = (e: any) => {
      console.log(1);

      if (!templateUrl.value) {
        tips.value = "松手即可上传";
      }
      isDrag.value = true;

      // 阻止默认事件
      e.stopPropagation();
      e.preventDefault();
    };

    // 鼠标在上传容器松开时
    const fileDrop = (e: any) => {
      // 过滤方法
      fileLimit(e.dataTransfer.files[0]);
    };

    // 拖动文件到容器之外时
    const filedragover = (e: any) => {
      if (!templateUrl.value) {
        tips.value = "将.png和.jpg文件拖放到这里！";
      }
      isDrag.value = false;
    };

    // 文件过滤方法
    const fileLimit = (file: File) => {
      console.log(file);

      if (file.size > 1024 * 500) {
        ElMessage.warning("图片大小超过限制");
        return;
      } else if (file.type != "image/jpeg" && file.type != "image/jpeg") {
        ElMessage.warning("所选文件类型不符合");
        return;
      } else {
        // 单图预览
        uploadFile.value = file;

        templateUrl.value = URL.createObjectURL(uploadFile.value) as any;

        isDrag.value = false;

        console.log("可以发送上传请求");
      }
    };

    // 上传文件
    const HandleUploadImg = async () => {
      console.log(uploadFile.value);

      // 构建formdata对象
      var formData = new FormData();

      formData.append("tag", "avatar");
      formData.append("haha", uploadFile.value);

      // 发送请求
      const res = await uploadImg(formData);

      if (res.data.code == 200) {
        ElMessage.success("上传成功");
      } else {
        ElMessage.error("上传失败,请刷新后重试");
      }
    };

    onMounted(() => {
      uploadMainRef.value.addEventListener("dragover", fileDrdragoveragover);
      uploadMainRef.value.addEventListener("drop", fileDrop);
      uploadShadowRef.value.addEventListener("dragover", filedragover);
    });

    return {
      uploadShadowRef,
      uploadMainRef,
      templateUrl,
      clickUpload,
      tips,
      isDrag,
      HandleUploadImg,
    };
  },
});
</script>

<style lang="scss" scoped>
.upload_shadow {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  opacity: 1;
  z-index: 2;
  .main {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 400px;
    height: 300px;
    vertical-align: middle;
    outline: 1px dashed aqua;
    background-color: #ffffff;
    input {
      position: absolute;
      z-index: 2;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      cursor: pointer;
    }

    div {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translateX(-50%) translateY(-50%);
      vertical-align: middle;
      text-align: center;
    }

    & > img {
      position: relative;
      z-index: 1;
      margin: auto;
      max-width: 100%;
      max-height: 100%;
    }

    p{
      font-size: 16px;
      white-space: nowrap;
    }

    .btn {
      position: absolute;
      top: 350px;
    }
  }
}

.isDrag {
  background-color: #f9f7e8;
}
</style>